<template>
  <div class="container">
    <el-dialog center destroy-on-close :model-value="show" :title="translateTitle('Dams.HSM.定时发送设置')" width="30%" @close="dialogClose">
      <el-form ref="tableHeadForm" class="mx-auto" label-position="top" label-width="120px">
        <el-form-item class="form-item" :label="translateTitle('Dams.HSM.选择定时发送的时间')" prop="time">
          <el-date-picker
            v-model="selectTime"
            :editable="false"
            format="YYYY-MM-DD HH:mm:ss"
            :placeholder="translateTitle('Dams.HSM.选择日期和时间')"
            style="width: 100%"
            type="datetime"
            value-format="YYYY-MM-DD HH:mm:ss"
          />
        </el-form-item>
        <div>
          {{ translateTitle('Dams.HSM.本次发送将在') }}
          <span>{{ chineseTime }}</span>
          {{ translateTitle('Dams.HSM.进行发送操作') }}
        </div>
        <div>{{ `${translateTitle('Dams.HSM.数据将保存到系统中')},${translateTitle('Dams.HSM.可在工资条管理中进行修改删除或发送操作')}` }}</div>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="$emit('update:show', false)">{{ translateTitle('Dams.HSM.取消') }}</el-button>
          <el-button type="primary" @click="confirm">{{ translateTitle('Dams.HSM.保存') }}</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
  import { translateTitle } from '@/utils/i18n'
  import { getStorage } from '@/utils/tools'
  export default {
    name: 'TimeDialog',
    components: {},
    props: {
      show: {
        type: Boolean,
        default: false,
      },
    },
    emits: ['update:show'],
    data() {
      return { selectTime: null, tableConfig: getStorage('tableConfig') }
    },
    computed: {
      chineseTime() {
        if (!this.selectTime) {
          return null
        }
        let timeStr = String(this.selectTime)
        return (
          timeStr
            .replace('-', translateTitle('Dams.HSM.年'))
            .replace('-', translateTitle('Dams.HSM.月'))
            .replace(' ', translateTitle('Dams.HSM.日'))
            .replace(':', translateTitle('Dams.HSM.时'))
            .replace(':', translateTitle('Dams.HSM.分')) + translateTitle('Dams.HSM.秒')
        )
      },
    },
    watch: {
      show() {
        this.selectTime = null
      },
    },
    methods: {
      translateTitle,
      dialogClose() {
        this.$emit('update:show', false)
      },
      confirm() {
        if (!this.selectTime) {
          this.$message({
            type: 'error',
            message: translateTitle('Dams.HSM.请选择定时发送的时间'),
          })
          return
        }
        this.$parent.result.submit_type = {
          type: 'delay',
          date: this.selectTime,
          month: this.tableConfig.month,
          salary_type: this.tableConfig.salaryType,
        }
        this.$parent.sendData()
      },
    },
  }
</script>

<style lang="scss" scoped></style>
